<template>
  <div class="talent_container">
    <div class="container hot_talent">
      <h2 class="home_item_title"><span>支持你成为热门人才</span><b>POPULAR  TALENT</b></h2>
      <article class="hot_talent_info">
        <p><img :src="List.picUrl" alt=""></p>
        <div class="hot_text">
          <h2 class="hot_text_title">{{List.talentName}}</h2>
          <p class="hot_text_content">{{List.remark}}</p>
        </div>
      </article>
    </div>
  </div>
</template>
<!--suppress JSAnnotator -->
<script>
  /* eslint-disable quotes */
  export default {
    name: 'HomeTalent',
    props: {
      List: {}
    },
    data () {
      return {
      }
    },
    methods: {
      abs () {
      }
    },
    computed: {
    },
    activated () {
      this.abs()
    }
  }
</script>
<style lang="stylus" scoped>
  .talent_container {
    background-color #fff

  }

  .hot_talent {
    position relative
    top: -140px;
    &:after {
      content 'SOFTWARE';
      font-weight bold
      font-size: 140.3px;
      color: #000000;
      opacity: 0.12;
      position relative
      left -194px;
      top: -35px;
      z-index 1;
    }
  }

  .hot_talent_info {
    margin-top 45px;
    background: url("http://www.duxue365.cn:8081/profile/website/56c4ff754731ce0d316a0f083169b6d4.png") no-repeat;
    background-size: cover
    height 383px;
    position relative
    z-index 2
    & > p {
      width: 336px;
      height: 280px;
      position: absolute;
      left: 120px;
      top: 45px;
      background #ccc;
      img {
        width 100%
        height auto;
      }
    }
    .hot_text {
      width: 468px;
      height: auto;
      overflow: hidden;
      text-align: left;
      position: absolute;
      right: 128px;
      top: 147px;
      .hot_text_title {
        font-size: 24px;
        color: #14c696;
        opacity: 0.9;
        &:after {
          content '';
          display block
          width: 42px;
          margin 10px 0
          height: 2px;
          background-image: linear-gradient(267deg,
          #219aca 0%,
          #1bb0b0 60%,
          #14c696 100%),
            linear-gradient(
              #14c696,
              #14c696);
          background-blend-mode: normal,
            normal;
        }
      }
      .hot_text_content {
        width: 467px;
        font-size: 16px;
        line-height: 36px;
        color: #000000;
        opacity: 0.9;
      }
    }
  }
</style>
